<template>
  <div class="form_content">
    <el-row>
      <el-col :span="8"><el-input v-model="title" placeholder="输入标题关键字搜索" @keyup.enter.native="submitSearch"></el-input></el-col>
      <el-col :span="3" style="margin-left:10px"><el-button type="primary" @click="submitSearch">搜索</el-button></el-col>
    </el-row>
    <div class="tb-head">
      <el-button icon="plus" @click="editItem('add')">新建表单</el-button>
      <el-button @click="multipleDel()">批量删除</el-button>
    </div>
    <el-table v-loading="tbLoading" element-loading-text="拼命加载中" :data="formList.list" stripe class="table" @select="selectData" @select-all="selectData">
      <el-table-column type="selection"></el-table-column>
      <el-table-column label="标题" width="400">
        <template slot-scope="scope">
          <!-- {{scope.row.title}} -->
          <a class="list-title" @click="scope.row.publishStatus?reportItem(scope.row.id):editItem(scope.row.id)" href="javascript:;">{{scope.row.title}}</a>
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          {{scope.row.publishStatus?'已发布':'草稿'}}
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="180">
        <template slot-scope="scope">
          {{dateFormat(scope.row.createTime)}}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="280"  class-name="is-center">
        <template slot-scope='scope'>
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              操作<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="'edit '+ scope.row.id">编辑</el-dropdown-item>
              <el-dropdown-item v-if="!scope.row.publishStatus" :command="'publish '+ scope.row.id">发布</el-dropdown-item>
              <el-dropdown-item :command="'view '+ scope.row.id"><a class="preview" :href="`${baseUrl2}/content/form/preview/${scope.row.id}`" target="_blank">预览</a></el-dropdown-item>
              <el-dropdown-item v-if="scope.row.publishStatus" :command="'report '+ scope.row.id">报表</el-dropdown-item>
              <el-dropdown-item :command="'del '+ scope.row.id">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        :current-page.sync="page"
        :page-size.sync="size"
        layout="sizes, total, prev, pager, next, jumper"
        :total="formList.page.total"
        :page-sizes="[10, 30, 50, 100]"
        @current-change="getFormListData()"
        @size-change="handleSizeChange">
      </el-pagination>
    </div>
    <el-dialog
      title="复制表单"
      :visible.sync="dialogCopy"
      width="30%">
      <p>请输入标题</p>
      <el-input v-model="copyTitle" placeholder="输入标题"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="copyItemSubmit" :loading="saving">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="预览"
      :visible.sync="dialogView"
      width="30%">
      <p>扫二维码在手机上预览</p>
      <img class="view-img" :src="viewFormImg" alt="">
    </el-dialog>
  </div>
</template>
<script>
  import {mapActions, mapState} from 'vuex'
  import config from '@/config/env'
  export default {
    data () {
      return {
        title: '',
        page: 1,
        size: 10,
        multipleSelection: [],
        tbLoading: false,
        dialogView: false,
        viewFormImg: '',
        dialogCopy: false,
        copyTitle: '',
        copyFormData: null,
        saving: false
      }
    },
    mounted () {
      this.initPage()
    },
    computed: {
      ...mapState({
        formList: state => state.contentManage.formList
      }),
      baseUrl2 () {
        return config.baseUrl2
      }
    },
    methods: {
      ...mapActions(['getFormList', 'delFormCheck', 'delFormList', 'getFormDetail', 'saveForm', 'publishForm']),
      initPage () {
        this.getFormListData()
      },
      // 日期格式化
      dateFormat (date) {
        return this.$date.format(new Date(date), 'YYYY-MM-DD HH:mm:ss')
      },
      // 搜索
      submitSearch () {
        this.page = 1
        this.getFormListData()
      },
      // 获取表单列表数据
      getFormListData () {
        this.getFormList({
          title: this.title,
          page: this.page,
          size: this.size
        })
      },
      // 更改每页条数
      handleSizeChange (size) {
        this.size = size
        this.getFormListData()
      },
      // 选中数据
      selectData (selection) {
        let arr = []
        selection.forEach((item, index, key) => {
          arr.push(item.id)
        })
        this.multipleSelection = arr
      },
      // 下拉菜单事件
      handleCommand (command) {
        let fnType = command.split(' ')[0]
        let id = command.split(' ')[1]
        switch (fnType) {
          case 'edit': this.editItem(id); break
          case 'del': this.sigleDel(id); break
          // case 'view': this.viewItem(id); break
          case 'copy': this.copyItem(id); break
          case 'publish': this.publishItem(id); break
          case 'report': this.reportItem(id); break
        }
      },
      // 批量删除
      multipleDel () {
        let dels = this.multipleSelection
        console.log(this.multipleSelection)
        if (dels.length === 0) {
          this.$message({
            type: 'warning',
            message: '请选择要删除的表单内容'
          })
        } else {
          this.$confirm('此操作将永久删除这些表单, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.delForm(dels)
          })
        }
      },
      // 单行删除
      sigleDel (id) {
        let me = this
        let dels = [id]
        me.$confirm('此操作将永久删除该表单, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          me.delFormCheck(dels).then(res => {
            if (res.data.code === 1) {
              me.delForm(dels)
            } else {
              me.$confirm(res.data.msgZ, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                me.delForm(dels)
              })
            }
          })
        })
        // .catch(() => {
        //   this.$message({
        //     type: 'info',
        //     message: '已取消删除'
        //   })
        // })
      },
      // 删除表单
      delForm (dels) {
        this.delFormList(dels).then(res => {
          if (res.data.code === 1) {
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            this.getFormListData()
          }
        })
      },
      // 编辑
      editItem (id) {
        this.$router.push({
          name: 'EditForm',
          params: {id: id}
        })
      },
      // 报表
      reportItem (id) {
        this.$router.push({path: `/formPage/${id}/first`})
      },
      // 发布
      publishItem (id) {
        this.publishForm(id).then(res => {
          if (res.data.code === 1) {
            this.$message({
              type: 'success',
              message: '发布成功'
            })
            this.getFormListData()
          }
        })
      },
      // 复制
      copyItem (id) {
        this.getFormDetail(id)
        .then(res => {
          this.copyTitle = '复制-' + res.data.data.title
          res.data.data.node = JSON.parse(res.data.data.node)
          this.copyFormData = res.data.data
          this.dialogCopy = true
        })
      },
      copyItemSubmit () {
        if (!this.copyTitle) {
          this.$message({
            type: 'warning',
            message: '表单标题不能为空'
          })
          return
        }
        this.copyFormData.title = this.copyTitle
        this.saving = true
        this.saveForm(this.copyFormData).then(res => {
          if (res.data.code === 1) {
            this.$message({
              type: 'success',
              message: '复制成功'
            })
            this.dialogCopy = false
            this.getFormListData()
          } else {
            this.$message({
              type: 'warning',
              message: res.data.msgZ
            })
          }
          this.saving = false
        })
      }
    }
  }
</script>
<style lang="scss">
  .form_content{
    .el-row{margin-bottom:15px;}
    .el-tag{margin-left:10px;height:18px;line-height:16px;}
    .newsItem{
      &{margin-top:10px;overflow:hidden;}
      .preview{float:left;width:100px;height:100px;}
      .content{margin-left:110px;}
    }
    .list-title{
      color: #333;
      text-decoration: none;
      &:hover{
        cursor: pointer;
        color: #20a0ff;
      }
    }
    .el-dropdown-link {
      cursor: pointer;
      color: #20a0ff;
    }
    .view-img{
      width: 250px;
      height: 250px;
      display: block;
      margin: 15px auto;
    }
    .el-dropdown{
      .el-button{
        border: none;
        background: transparent;
        &:first-child{
          padding-right: 0;
        }
      }
    }
  }
  .preview{
    color: #5e6b7c;
    text-decoration: none;
  }
</style>
